<template>
    <div class="growthInfo">
        <div class="fishImg">
            <el-image style="width: 100%; height: 100%;" fit="contain" :src="getImgUrl(fileId)"
                :preview-src-list="[getImgUrl(fileId)]">
            </el-image>
        </div>
        <div class="batchInfo batchInfoGrowStageName" v-show="modeFlag == 2 && growFeedConfigList.length > 0">
            <div class="title">
                <div>适宜的生长环境</div>
            </div>
            <div class="btn" @click="lookView(growEnvironmentList, 1)">
                <i class="el-icon-document icon"></i>详情
            </div>
            <div class="info">
                <div class="item" v-for="item, index in growEnvironmentList" :key="index">
                    {{ `${item.dataTypeName}:${item.minValue}-${item.maxValue}${item.unitName}` }}
                </div>
            </div>
            <div class="line">
                <div class="round1">
                    <div class="round2"></div>
                </div>
            </div>
        </div>
        <div class="batchInfo batchInfoEnvironmentAlarm" v-show="modeFlag == 2 && growFeedConfigList.length > 0">
            <div class="title">
                <div>阶段投喂量</div>
            </div>
            <div class="info">
                <p>养殖品种名称:{{ growObj.plantVarietyName }}</p>
                <p>阶段名称:{{ growObj.growStageName }}</p>
                <div>
                    建议/投喂量: <span v-for="item, index in growFeedConfigList" :key="index">
                        <span v-show="item.num">日投喂{{ item.num }}次;</span>
                        <span>{{ item.remark }}</span>
                    </span>
                </div>
            </div>
            <!-- <div class="btn" @click="lookView(environmentAlarmList, 1)">
                <i class="el-icon-document icon"></i>详情
            </div> -->
            <div class="line">
                <div class="round1">
                    <div class="round2"></div>
                </div>
            </div>
        </div>
        <div class="batchInfo batchInfoGrowthFeaturesManage"
            v-show="modeFlag == 2 && growthFeaturesManageList.length > 0">
            <div class="title">
                <div>阶段特征</div>
            </div>
            <div class="btn" @click="lookView(growthFeaturesManageList, 2)">
                <i class="el-icon-document icon"></i>详情
            </div>
            <div class="info">
                <div class="item" v-for="item, index in growthFeaturesManageList" :key="index">
                    <div class="label">{{ `特征${index + 1}` }}</div>
                    <div>特征描述：</div>
                    <div>{{ item.content }}</div>
                    <div>作业建议：</div>
                    <div>{{ item.suggest }}</div>
                    <div>注意事项：</div>
                    <div>{{ item.note }}</div>
                </div>
            </div>

            <div class="line">
                <div class="round1">
                    <div class="round2"></div>
                </div>
            </div>
        </div>
        <div class="batchInfo batchInfoStagePestManage" v-show="modeFlag == 2 && stagePestManageList.length > 0">
            <div class="title">
                <div>阶段常见病害及处理方法</div>
            </div>
            <div class="btn" @click="lookView(stagePestManageList, 3)">
                <i class="el-icon-document icon"></i>详情
            </div>
            <div class="info">
                <div class="item" v-for="item, index in stagePestManageList" :key="index">
                    <div class="label">{{ `疾病名称：${item.stageDiseaseName}` }}</div>
                    <div>{{ `疾病描述：${item.content}` }}</div>
                    <div>{{ `疾病处理方法： ${item.method}` }}</div>
                </div>
            </div>

            <div class="line">
                <div class="round1">
                    <div class="round2"></div>
                </div>
            </div>
        </div>
        <el-dialog :close-on-click-modal="false"  :append-to-body='true' title="详情信息" :visible.sync="dialogVisible"
            :width="status == 2 ? '80%' : '50%'" :before-close="handleClose">
            <div v-show="status == 1">
                <div class="warningList" v-for="item, index in environmentAlarmList" :key="index">
                    <span>预警条件：</span>
                    <span>当{{ item.dataTypeName || '--' }}</span>
                    <span>大于{{ item.upperLimitValue || 0 }}时,</span>
                    <span>可能造成{{ item.upperLimitResult || '--' }};</span>
                    <span>低于{{ item.lowerLimitValue || 0 }}时,</span>
                    <span>可能造成{{ item.lowerLimitResult || '--' }}。</span>
                </div>
            </div>
            <div v-show="status == 2">
                <div class="featuresList" v-for="item, index in growthFeaturesManageList" :key="index">
                    <div class="childModule">
                        <div class="configTitle">
                            <i class="el-icon-caret-right"></i>
                            <span class="configLabel">特征{{ index + 1 }}</span>
                        </div>
                        <div class="text">{{ item.content }}</div>
                        <div class="imgList">
                            <el-image class="elImg" v-for="img, index in item.featuresImgList" :key="index"
                                style="width: 100px; height: 100px;margin: 4px;" :src="img"
                                :preview-src-list="item.featuresImgList">
                            </el-image>
                        </div>
                    </div>
                    <div class="childModule">
                        <div class="configTitle">
                            <i class="el-icon-caret-right"></i>
                            <span class="configLabel">作业建议</span>
                        </div>
                        <div class="text">{{ item.suggest }}</div>
                        <div class="imgList">
                            <el-image class="elImg" v-for="img, index in item.taskImgList" :key="index"
                                style="width: 100px; height: 100px;margin: 4px;" :src="img"
                                :preview-src-list="item.taskImgList">
                            </el-image>
                        </div>
                    </div>
                    <div class="childModule">
                        <div class="configTitle">
                            <i class="el-icon-caret-right"></i>
                            <span class="configLabel">注意事项</span>
                        </div>
                        <div class="text">{{ item.note }}</div>
                        <div class="imgList">
                            <el-image class="elImg" v-for="img, index in item.mattersImgList" :key="index"
                                style="width: 100px; height: 100px;margin: 4px;" :src="img"
                                :preview-src-list="item.mattersImgList">
                            </el-image>
                        </div>
                    </div>
                </div>
                <div class="noData" v-show="!growthFeaturesManageList.length">暂无数据</div>
            </div>
            <div v-show="status == 3">
                <div class="featuresList stage">
                    <div class="childModule" v-for="item, index in stagePestManageList" :key="index">
                        <div class="configTitle">
                            <i class="el-icon-caret-right"></i>
                            <span class="configLabel">{{ item.stageDiseaseName }}：</span>
                            <span class="configText">{{ item.content }}</span>
                        </div>
                        <div class="text">
                            {{ item.method }}
                        </div>
                        <div class="imgList">
                            <el-image class="elImg" v-for="img, index in item.imgList" :key="index"
                                style="width: 100px; height: 100px;margin: 4px;" :src="img"
                                :preview-src-list="item.imgList">
                            </el-image>
                        </div>
                    </div>
                    <div class="noData" v-show="!stagePestManageList.length">暂无数据</div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import growEnvironment from '@/api/cropModel/growEnvironment' //生长环境环境
import environmentAlarmConfig from '@/api/cropModel/environmentAlarmConfig'  //阶段环境预警
import growthFeaturesManage from '@/api/cropModel/growthFeaturesManage' //阶段生长特征
import stagePestManage from '@/api/cropModel/stagePestManage' //阶段病害
import growFeedConfig from '@/api/cropModel/growFeedConfig' //阶段投喂
export default {
    components: {},
    props: {
        modeFlag: {
            type: Number,
            default: () => {
                return 1
            }
        },
        growObj: {
            type: Object,
            default: () => {
                return {}
            }
        },
        stageList: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            status: 0,
            dialogVisible: false,
            stageDays: [],
            growEnvironmentList: [],  //生长环境环境
            environmentAlarmList: [],  //阶段环境预警
            growthFeaturesManageList: [],  //阶段生长特征
            stagePestManageList: [], //阶段病害
            growFeedConfigList:[],
        }
    },

    watch: {
        growObj: {
            handler(v) {
                console.log(this.growObj)
                this.fileId = this.growObj.fileId
                this.growStageId = v.growStageId
                this.plantVarietyId = v.plantVarietyId
                this.initData()
            },
            immediate: true,
            deep: true,
        },
        // modeFlag(v) {
        //     console.log(this.growObj)
        //     this.growStageId = this.growObj.growStageId
        //     this.plantVarietyId = this.growObj.plantVarietyId
        //     this.initData()
        // },
    },
    computed: {},
    mounted() {
        this.getDays()
    },
    methods: {
        async initData() {
            if (!this.growStageId || !this.plantVarietyId) {
                this.growEnvironmentList = [];
                this.environmentAlarmList = [];
                this.growthFeaturesManageList = [];
                this.stagePestManageList = [];
                this.growFeedConfigList = []
                return
            }
            let params = {
                growStageId: this.growStageId,
                plantVarietyId: this.plantVarietyId
            };
            let { data: growEnvironmentList } = await growEnvironment.queryByCondition(params); //生长环境环境
            let { data: environmentAlarmList } = await environmentAlarmConfig.queryByCondition(params); //阶段环境预警
            let { data: growthFeaturesManageList } = await growthFeaturesManage.queryByCondition(params); //阶段生长特征
            let { data: stagePestManageList } = await stagePestManage.queryByCondition(params); //阶段病害
            let { data: growFeedConfigList } = await growFeedConfig.queryByCondition(params); //阶段病害


            this.growEnvironmentList = growEnvironmentList || [];
            this.environmentAlarmList = environmentAlarmList || [];
            this.growthFeaturesManageList = growthFeaturesManageList || [];
            this.stagePestManageList = stagePestManageList || [];
            this.growFeedConfigList = growFeedConfigList || [];

            this.growthFeaturesManageList.forEach(item => {
                item.featuresImgList = [];
                item.mattersImgList = [];
                item.taskImgList = [];
                let featuresIdList = item.featuresIdList || []
                let mattersIdList = item.mattersIdList || []
                let taskIdList = item.taskIdList || []
                featuresIdList.forEach(id => {
                    item.featuresImgList.push(`${this.$baseurl.fileServiceUrl}fish/public/files/download?fileId=${id}`)
                })
                mattersIdList.forEach(id => {
                    item.mattersImgList.push(`${this.$baseurl.fileServiceUrl}fish/public/files/download?fileId=${id}`)
                })
                taskIdList.forEach(id => {
                    item.taskImgList.push(`${this.$baseurl.fileServiceUrl}fish/public/files/download?fileId=${id}`)
                })
            })

            this.stagePestManageList.forEach(item => {
                item.imgList = [];
                let pictureIdList = item.pictureIdList || []
                pictureIdList.forEach(id => {
                    item.imgList.push(`${this.$baseurl.fileServiceUrl}fish/public/files/download?fileId=${id}`)
                })
            })
        },
        lookView(dataList, status) {
            console.log(dataList)
            this.dialogVisible = true;
            this.status = status;
        },
        getDays() {
            this.stageDays = []
            this.stageList.forEach((item, index) => {
                let list = this.stageList.slice(0, index + 1);
                this.stageDays.push({
                    ...item,
                    day: list.reduce((accumulator, currentItem) => {
                        return accumulator + currentItem.annualGrowDay;
                    }, 0) // 初始值为0 
                })
            });
        },
        getImgUrl(id) {
            if (id) {
                return `${this.$baseurl.fileServiceUrl}fish/public/files/download?fileId=${id}`
            } else {
                return ''
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.growthInfo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100% auto;
    background-position: bottom;

    .batchInfo {
        width: 350px;
        min-height: 150px;
        position: absolute;
        font-size: 16px;
        color: #ffffff;

        .btn {
            position: absolute;
            right: 15px;
            top: 45px;
            width: 70px;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            background: #09bdcd7c;
            border: 1px solid #09bdcdf6;
            padding: 0 10px;
            text-align: center;
            cursor: pointer;

            .icon {
                padding-right: 5px;
                font-size: 14px;
            }
        }

        .title {
            padding: 0 15px;
            background-color: #0593EB;
            color: #ffffff;
            line-height: 36px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(-135deg, transparent 90px, #12abb9 0) top right;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-color: rgba(0, 0, 0, 0);


        }

        .info {
            height: 200px;
            overflow-y: auto;
            padding: 10px 15px;
            background-color: #00000067;
            border: 1px solid #28F7F9;

            .label {
                font-weight: bold;
                color: #ffffff;
            }

            .item {
                line-height: 30px;
            }
        }

        ::v-deep .el-input__inner {
            background-color: #00000000;
            border: 1px solid #00000000;
            font-size: 16px;
            color: #ffffff;
        }
    }

    .batchInfoGrowStageName {
        top: 120px;
        left: 100px;

        .line {
            position: absolute;
            right: -250px;
            top: 100px;
            width: 250px;
            height: 100px;
            border-top: 1px solid #28F7F9;
            border-right: 1px solid #28F7F9;

            .round1 {
                width: 40px;
                height: 40px;
                background-color: #0593eb3a;
                display: flex;
                align-items: center;
                justify-content: space-around;
                border-radius: 50%;
                position: absolute;
                bottom: -40px;
                right: -20px;
                border: 1px solid #28f5f989;
                .round2 {
                    width: 20px;
                    height: 20px;
                    background-color: #0593eb99;
                    border-radius: 50%;
                    border: 1px solid #28F7F9;
                }
            }
        }
    }

    .batchInfoEnvironmentAlarm {
        top: 80px;
        right: 70px;

        .line {
            position: absolute;
            left: -200px;
            top: 100px;
            width: 200px;
            height: 150px;
            border-top: 1px solid #28F7F9;
            border-left: 1px solid #28F7F9;

            .round1 {
                width: 40px;
                height: 40px;
                background-color: #0593eb3a;
                display: flex;
                align-items: center;
                justify-content: space-around;
                border-radius: 50%;
                position: absolute;
                bottom: -40px;
                left: -20px;
                border: 1px solid #28f5f989;

                .round2 {
                    width: 20px;
                    height: 20px;
                    background-color: #0593eb99;
                    border-radius: 50%;
                    border: 1px solid #28F7F9;
                }
            }
        }
    }

    .batchInfoGrowthFeaturesManage {
        bottom: 50px;
        left: 200px;

        .line {
            position: absolute;
            right: -250px;
            top: 0;
            width: 250px;
            height: 150px;
            border-bottom: 1px solid #28F7F9;
            border-right: 1px solid #28F7F9;

            .round1 {
                width: 40px;
                height: 40px;
                background-color: #0593eb3a;
                display: flex;
                align-items: center;
                justify-content: space-around;
                border-radius: 50%;
                position: absolute;
                top: -40px;
                right: -20px;
                border: 1px solid #28f5f989;

                .round2 {
                    width: 20px;
                    height: 20px;
                    background-color: #0593eb99;
                    border-radius: 50%;
                    border: 1px solid #28F7F9;
                }
            }
        }
    }

    .batchInfoStagePestManage {
        bottom: 100px;
        right: 200px;

        .line {
            position: absolute;
            left: -100px;
            top: 0;
            width: 100px;
            height: 100px;
            border-bottom: 1px solid #28F7F9;
            border-left: 1px solid #28F7F9;

            .round1 {
                width: 40px;
                height: 40px;
                background-color: #0593eb3a;
                display: flex;
                align-items: center;
                justify-content: space-around;
                border-radius: 50%;
                position: absolute;
                top: -40px;
                left: -20px;
                border: 1px solid #28f5f989;

                .round2 {
                    width: 20px;
                    height: 20px;
                    background-color: #0593eb99;
                    border-radius: 50%;
                    border: 1px solid #28F7F9;
                }
            }
        }
    }

    .fishImg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 700px;
        height: 500px;
    }

    .content {
        display: flex;
        justify-content: space-around;
        flex-wrap: nowrap;
        box-sizing: border-box;
        width: 100%;
        position: absolute;
        bottom: -40px;
        left: 0;

        .stage {
            width: 100%;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;

            .img {
                max-width: 200px;
                height: 240px;
                margin: 0 auto;
                transition: all 0.2s;
            }

            &:hover {
                .img {
                    background-color: rgba(0, 162, 255, 0.6);
                }
            }

            .name {
                color: #ffffff;
                font-size: 12px;
            }

            .stagePoint {
                width: 100%;
                height: 10px;
                margin: 10px 0;
                position: relative;

                .point {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-color: #ffffff;
                }

                .line {
                    width: 100%;
                    height: 2px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-color: #ffffff;
                }
            }

            .stageTime {
                display: inline-block;
                margin: 0 auto;
                color: #ffffff;
                font-size: 12px;
                padding: 0 10px;
                line-height: 24px;
                border-radius: 12px;
                box-sizing: border-box;
                border: 1px solid #ffffff;
            }
        }
    }
}

.warningList {
    font-size: 14px;
    line-height: 30px;
}

.middlecontent {
    height: calc(100% - 50px);
    overflow: auto;
}

.featuresList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding: 10px 15px;
    margin-bottom: 10px;
    background: #4381b526;
    border: 1px solid #f5f5f5;
    transition: all 0.6s;
    border-radius: 5px;

    .configLabel {
        font-weight: bold;
        font-size: 16px;
    }

    &:last-child {
        border-bottom: none;
    }

    &:hover {
        transform: translateX(-5px);
        background: #4382b53b;
    }


    .childModule {
        width: calc(100% / 3 - 20px);

        .text {
            line-height: 30px;
            max-height: 150px;
            overflow: auto;
        }
    }

    .btn {
        width: 100%;
        padding: 5px 0;
        text-align: right;
    }
}

.stage {
    .childModule {
        width: 100%;
        text-align: left;
    }
}

/* 隐藏滚动条 */
*::-webkit-scrollbar {
    display: none;
}
</style>